<template>
	<div class="the-add-rules">
		<Dialog @close="close" @confirm="confirm" :dialogISshow="addRulIsShow.state" title="添加规则" width="70%">
			<div class="the-rules-content">
				<el-form-item label="" v-for="(item,index) in rules" :key="item+index" label-width="0px">
					<div class="left">
						<el-input v-model="item.condition.describe" @input="levelNameChange(index)" class="rule-name" placeholder="请填写规则名称">
							<span>xxxx</span>
						</el-input>
						<div>
							<el-tag v-for="(tag,idx) in item.result.getReward" :key="tag.id" closable @close="closeTag(index,idx)">
								<span v-text="tag.name"></span>
							</el-tag>

							<el-button type="text" icon="el-icon-plus" @click="showPrizeList(index)">添加奖品</el-button>
						</div>
					</div>
					<el-button type="danger" class="add" icon="el-icon-delete" circle @click="removeRule(index)" v-if="index!==rules.length-1"></el-button>
					<div class="add-box" v-else>
						<el-button type="success" class="add" icon="el-icon-plus" circle @click="addRule"></el-button>
						<el-button type="danger" class="add" icon="el-icon-delete" circle @click="removeRule(index)"></el-button>
					</div>
				</el-form-item>

			</div>
			<el-dialog width="30%" title="奖品列表" :visible.sync="innerVisible" :fullscreen="true" append-to-body :center="true">
				<components :is="CheckPrizeList" :prizeData="prizeData" :select="true" :height="700" @selectChange="selectChange" :checkPrize="checkPrize"></components>
				<span slot="footer" class="dialog-footer">
					<el-button @click="innerVisible = false">取 消</el-button>
					<el-button type="primary" @click="confirmCheck">确 定</el-button>
				</span>
			</el-dialog>
		</Dialog>
	</div>
</template>
<script>
import CheckPrizeList from './check-prize-list';
export default {
	props: {
		rules: {
			type: Array,
			default() {
				return [
					{
						condition: {
							level: 1,
							describe: '体验金10000元',
						},
						result: {
							getReward: [],
							getChange: 0,
						},
						status: 'ENABLE',
					},
				];
			},
		},
		addRulIsShow: {
			type: Object,
			default() {
				return {
					state: false,
				};
			},
		},
		activeId: {
			type: Number,
		},
		prizeData: {
			type: Array,
			default() {
				return [];
			},
		},
	},
	data() {
		return {
			show: false,
			innerVisible: false,
			editLevel: [],
			platformType: {
				21: 2,
				22: 1,
				1: 3,
				2: 3,
				4: 3,
				5: 3,
			},
			checkPrize: [],
			CheckPrizeList: null,
			// rules: [],
		};
	},
	name: 'AddRules',
	methods: {
		closeTag(index, idx) {
			this.rules[index].result.getReward.splice(idx, 1);
		},
		selectChange(data) {
			// this.editRule = data;
			this.rules[this.editLevel].result.getReward = this.dataFomDat(data);
			console.log(this.rules);
			// data.forEach(item => {});
		},
		addRule() {
			// let
			let level = this.rules.length + 1;
			this.rules.push({
				condition: {
					level,
					describe: '',
				},
				result: {
					getReward: [],
					getChange: 0,
				},
				status: 'ENABLE',
			});
		},
		removeRule(i) {
			if (this.rules.length === 1) {
				log.warn(`不可删除，至少应保留一条规则`);
				return;
			}
			this.$msgbox({
				title: '提示',
				message: '当前操作将删除此规则，是否继续？',
				showCancelButton: true,
			}).then(res => {
				this.rules.splice(i, 1);
			});
		},
		close() {
			this.addRulIsShow.state = false;
		},
		showPrizeList(level) {
			let levelName = this.rules[level].condition.describe;
			if (!levelName) {
				log.warn(`请先填写规则名称`);
				return;
			}
			this.innerVisible = true;
			this.CheckPrizeList = CheckPrizeList;
			this.editLevel = level;
			this.rules[level].condition.level = level + 1;
			try {
				this.checkPrize = this.rules[level].result.getReward;
			} catch (error) {}

			// this.editRule = editRule;
		},
		confirm() {
			// console.log(this.rules);
			let isOk = true;
			let rules = JSON.parse(JSON.stringify(this.rules));
			rules.some((item, index) => {
				if (!item.condition.describe) {
					log.warn('规则名称不能为空');
					isOk = false;
					return true;
				} else if (!item.result.getReward.length) {
					log.warn(`规则${item.condition.describe}应至少选择一个奖品`);
					isOk = false;
					return true;
				}
			});
			isOk ? this._submit() : '';
		},
		confirmCheck() {
			this.innerVisible = false;
			this.CheckPrizeList = null;
		},

		dataFomDat(data) {
			// console.log(data)
			let tepms = data.map(item => {
				let goodType = null;
				let prizeName = this.rules[this.editLevel].condition.describe;
				if (item.prizeType) {
					goodType = this.platformType[item.prizeType];
				} else if (item.type && (item.type == 1 || item.type == 2)) {
					goodType = 4;
				} else {
					log.warn(`奖品${item.id}格式有误`);
					return '';
				}
				return {
					id: item.id,
					name: item.name,
					goodType,
					prizeName,
				};
			});

			return tepms;
		},
		levelNameChange(index) {
			let goodsList = this.rules[index].result.getReward;
			goodsList.forEach(item => {
				item.prizeName = this.rules[index].condition.describe;
			});
			// console.log(this.rules,'----rules')
		},
		_submit() {
			if (!this.activeId) {
				log.warn('活动id不能为空');
				return;
			}
			let rules = this.rules;
			let ids = this._getIds(rules);
			// console.log('%c gc_ids=>: ', 'color: MidnightBlue; background: Aquamarine; font-size: 20px;', ids,this.rules);
			this.$http('/admin/active/editActive', {
				activeId: this.activeId,
				activity_rule: JSON.stringify(rules),
				experience_red_packet_ids: ids[1].join(','),
				cash_red_packet_ids: ids[2].join(','),
				coupon_ids: ids[3].join(','),
				award_ids: ids[4].join(','),
			}).then(res => {
				if (res.code == 10200) {
					log.ok('规则更新成功');
					this.$emit('refresh');
					this.close();
				}
			});
		},
		// '1 - 体验金、2 - 现金红包、3 - 卡券 4- 自建奖品',
		_getIds(rules) {
			let ids = {
				1: [],
				2: [],
				3: [],
				4: [],
			};
			rules.forEach(item => {
				let goodsList = item.result.getReward;
				goodsList.forEach(it => {
					ids[it.goodType] ? ids[it.goodType].push(it.id) : '';
				});
			});
			return ids;
		},
	},
	watch: {
		// prizeData(val) {
		// 	console.log('xxxxxcccc', val);
		// },
		innerVisible(isShow) {
			if (!isShow) {
				this.CheckPrizeList = null;
			}
		},
	},
};
</script>
style.<style lang="scss">
.the-add-rules {
	.the-rules-content {
		.el-form-item__content {
			// background: red;
			display: flex;
			justify-content: space-between;
			// >.add-box{}
			.add {
				width: 40px;
				height: 40px;
			}
			> .left {
				flex: 1;
				display: flex;
				justify-content: flex-start;
				.rule-name {
					flex: 0 0 150px;
					margin-right: 30px;
				}
				> div {
					flex: 1;
					.el-tag {
						margin-right: 5px;
					}
				}
			}
		}
	}
}
</style>


